<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px" :class="['aside',{collapse:isCollapse} ]">
                <AsideMenu />
            </el-aside>
            <el-container>
                
                <el-header class="header">
                    <HeaderCustom />
                    
                </el-header>
                
                <el-main class="main">
                    <BreadCrumb />
                    <router-view />
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>


<script>
import AsideMenu from '../components/AsideMenu.vue'
import HeaderCustomVue from '../components/HeaderCustom.vue';
import BreadCrumb from '../components/BreadCrumb.vue';
export default {
    components: {//注册组件
        AsideMenu,
        HeaderCustomVue,
        BreadCrumb,
    },
    computed: {
        // ...mapState({
        //     isCollapse: state => state.user.isCollapse
        // })
        isCollapse(){
            return this.$store.state.user.isCollapse;
        }
    },
    mounted() {
        //跳转到路由为analysis的页面
        this.$router.push({ path: '/Dashboard/analysis' });
    }
}
</script>

<style lang="scss" scoped>
// .header{
//     position:fixed;
//     top:0;
//     right:0;
//     background:white;
//     width:100vw
// }
.aside {
    height: 100vh;
    background: #545c64;
    // background: #94dcb8;
    // background:#001529;
    transition: all 0.5s;
    &.collapse {
        width: 65px;
    }
}

.main {
    background: #f0f2f5
}

.main :deep(.el-form) {
    background: white;
    padding: 8px;
    border-radius: 8px;
}

.main :deep(.el-table) {
    background: white;
    padding: 8px;
    border-radius: 8px;
}
</style>